<template>
	<div class="page">
		<!-- bg -->
		<div class="bg">
			<div style="flex: 1;background-color: #74eb41;">
			</div>
			<div
				style="flex: 2;background-color: #FFFFFF;display: flex;flex-direction: column;justify-content: flex-end;align-items: center;padding-bottom: 12px;">
			</div>
		</div>
		<!-- content -->
		<div class="body">
			<div style="color: #FFFFFF;font-size: 30px;font-weight: bold;margin: 20px;margin-top: 64px;">Let's Start
				with Login</div>
			<div class="panel">
				<van-field type="text" label="" placeholder="Email" style="border:1px solid #EBEBEB" v-model="email" />
				<van-field type="password" label="" placeholder="Password" v-model="password"
					style="border:1px solid #EBEBEB;margin-top:12px;" />
				<div style="display:flex;flex-direction: column;">
					<button style="
				height: 44px;background-color: #74eb41;
				margin-top: 12px;
				color: #FFFFFF;
				border: none;
				box-shadow: 0 0 10px #74eb41;
				" @click="loginHanlde()">Login</button>
					<button style="height: 44px;background-color: #126ebe;margin-top: 20px;color: #FFFFFF;border: none;"
						@click="loginHanlde()">FaceBook</button>
				</div>
				<div style=" margin-top: 20px;color: #126ebe;text-align: center;font-size: 14px;">Skip
				</div>
			</div>

		</div>

		<!-- bottom -->
		<div style="margin-bottom: 12px;z-index: 999;background-color: red;">
			<div style="display: flex;flex-direction: column;align-items: center;">
				<div style="margin-top: 12px;color: #126ebe;">Forget Password</div>
				<div style="margin-top: 12px;color: #126ebe;" @click="registBtnClickHandle()">Have No
					Accout</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				email: "",
				password: ""
			}
		},
		methods: {
			loginHanlde() {
				this.$router.push({
					path: "/"
				})
			},
			registBtnClickHandle() {
				this.$router.push({
					path: "/reg"
				})
			},
		}
	}
</script>

<style>
	input {
		background-color: white;
	}
</style>

<style scope>
	.page {
		height: 100vh;
		display: flex;
		flex-direction: column;
		position: relative;
	}

	.bg {
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		background-color: orange;
		display: flex;
		flex-direction: column;
	}

	.body {
		height: 45px;
		flex: 1;
		z-index: 998;
		display: flex;
		flex-direction: column;
	}

	.panel {

		margin: 0 12px;
		margin-bottom: 80px;
		padding: 40px 12px 40px 12px;
		background-color: #FFFFFF;
		border-radius: 10px;
		box-shadow: 0 0 10px #00000020;
	}

	.input {
		background-color: #FFFFFF;
		height: 44px;
		padding-left: 12px;
		border: 1px solid #EBEBEB;
		border-radius: 4px;
		color: #74eb41;
	}
</style>
